{% extends '::base.html.twig' %}

{% block javascript %}
<script type="text/javascript">
	function validate() {
		//validate passwords to ensure they match
		var password = document.getElementById( "form_password" );
		var confirmPassword = document.getElementById( "confirmPassword" );
		var passwordError = document.getElementById( "passwordInfo" );
		
		if( password.value != confirmPassword.value ) {
			passwordError.innerHTML = "<ul><li>Passwords must match!</li></ul>";
			return false;
		}
	}
</script>

{% endblock %}

{% block body %}
	{{ parent() }}
		<h1>Register</h1>
			<br />
			<p>Already have a ShowStop account? Sign in <a href="{{ path('_login') }}">here</a>.</p> 
			<br />
		<form action="{{ path('_register') }}" method="post" {{ form_enctype(form) }} onSubmit="return validate()">
			<table class="RegisterTable">
					 <col width="25%">
					 <col width="25%">
					 <col width="50%">
					<tr>
						<td class="registerText"> User Name:</td>
						<td>{{ form_widget( form.username ) }}</td>
						<td class="info" id="uNameInfo">{{ form_errors( form.username ) }}</td>
					</tr>
					<tr>
						<td class="registerText"> Password:</td>
						<td>{{ form_widget( form.password ) }}</td>
						<td class="info" id="passwordInfo">{{ form_errors( form.password ) }}</td>
					</tr>
					<tr>
						<td class="registerText"> Confirm Password:</td>
						<td><input type="password" name="confirmPassword" id="confirmPassword" /></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2"><div style="color: #A6A6A6; font-size: 7px; text-align: left">4-character minimum; case sensitive</div></td>
					</tr>
					<tr>
						<td class="registerText">Email:</td>
						<td>{{ form_widget( form.email ) }}</td>
						<td class="info" id="emailInfo">{{ form_errors( form.email ) }}</td>
					</tr>
					<tr>
						<td class="registerText">First name:</td>
						<td>{{ form_widget( form.fname ) }}</td>
						<td class="info" id="fNameInfo">{{ form_errors( form.fname ) }}</td>
					</tr>
					<tr>
						<td class="registerText">Last name:</td>
						<td>{{ form_widget( form.lname ) }}</td>
						<td class="info" id="lNameInfo">{{ form_errors( form.lname ) }}</td>
					</tr>
					<tr>
						<td class="registerText">Gender:</td>
						<td>{{ form_widget( form.gender ) }}</td>
						<td width="1%"> </td>
					</tr>
					<tr>
						<td class="registerText">Birth year:</td>
						<td>{{ form_widget( form.birth ) }}</td>
						<td class="info" id="bYearInfo"></td>
					</tr>
				</table>
				<br /> 
				<div style="text-align: center">
					<p style="margin-bottom: 20px">By clicking 'I Accept' you hereby accept the ShowStop <a href="#" style="font-style: italic">Agreement and Privacy Statement</a>.</p>
					<input id="acceptButton" class="grey-button" type="submit" value="I Accept" style="padding: 3px" />
				</div>
			
				{{ form_rest(form) }}
		</form>

 {% endblock %}
